<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商家注册</title>
<!-- CSS 
    ========================= -->
<!--bootstrap min css-->
<link rel="stylesheet"
	href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
<!--owl carousel min css-->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<!--slick min css-->
<link rel="stylesheet" href="assets/css/slick.css">
<!--magnific popup min css-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--font awesome css-->
<link rel="stylesheet"
	href="https://www.jq22.com/jquery/font-awesome.4.7.0.css">
<!--ionicons css-->
<link rel="stylesheet" href="assets/css/ionicons.min.css">
<!--linearicons css-->
<link rel="stylesheet" href="assets/css/linearicons.css">
<!--animate css-->
<link rel="stylesheet" href="assets/css/animate.css">
<!--jquery ui min css-->
<link rel="stylesheet" href="assets/css/jquery-ui.min.css">
<!--slinky menu css-->
<link rel="stylesheet" href="assets/css/slinky.menu.css">
<!--plugins css-->
<link rel="stylesheet" href="assets/css/plugins.css">

<!-- Main Style CSS -->
<link rel="stylesheet" href="assets/css/style.css">

<!--modernizr min js here-->
<script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>
<script type="text/javascript">

	/*      function storename(){
		 var text=document.getElementById("num1").value;
		 var s=document.getElementById("span1");
		 var patt=/^[\u4e00-\u9fa5]{2,5}$/; 
		  var flag= patt.test(text);
		  if(flag){
                s.innerHTML="<font color='green'>店名合法</font>"              
		  }else{
                s.innerHTML="<font color='red'>店名必须是中文，长度2到5位</font>"
		  }
		  return flag;
		  }
	      */
	     function call(){
		     var text2=document.getElementById("num2").value;
		     var s=document.getElementById("span2");
		     var patt=/^1[34578]\d{9}$/
		     var flag=  patt.test(text2);
		     if(flag){
	                s.innerHTML="<font color='green'>手机号码合法</font>"              
			  }else{
	                s.innerHTML="<font color='red'>输入正确的手机号码！</font>"
			  }
			  return flag;
		     }
	     
	     
	     function storeusername(){
			 var text3=document.getElementById("num3").value;
			 var s=document.getElementById("span3");
			 var patt=/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/
			  var flag=  patt.test(text3);
			  if(flag){
	                s.innerHTML="<font color='green'>商家名合法</font>"              
			  }else{
	                s.innerHTML="<font color='red'>商家名必须以字母开头,用户名包含大小写字母数字，长度4到15位</font>"
			  }
			  return flag;
			  }
	     
	     
	     
	     function address(){
			 var text4=document.getElementById("num4").value;
			 var s=document.getElementById("span4");
			 var patt= /^[\u4e00-\u9fa5]+$/;
			  var flag= patt.test(text4);
			  if(flag){
	                s.innerHTML="<font color='green'>商家地址合法</font>"              
			  }else{
	                s.innerHTML="<font color='red'>商家地址必须使用中文</font>"
			  }
			  return flag;
			  }
	     
	     //验证密码
	     function psd(){
	     var text5=document.getElementById("num5").value;
	     var s=document.getElementById("span5");
	     var patt= /^[\w_-]{6,16}$/
	     var flag=   patt.test(text5);
	     if(flag){
                s.innerHTML="<font color='green'>商家密码合法</font>"              
		  }else{
                s.innerHTML="<font color='red'>密码可以包含字母数组下划线,长度6到16位</font>"
		  }
		  return flag;
	     }
	    
	     function info(){
		     var text6=document.getElementById("num6").value;
		     var s=document.getElementById("span6");
		     var patt= /^[\u4e00-\u9fa5]+$/;
		     var flag=   patt.test(text6);
		     if(flag){
	                s.innerHTML="<font color='green'>商家简介合法</font>"              
			  }else{
	                s.innerHTML="<font color='red'>商家简介必须是中文</font>"
			  }
			  return flag;
		     }
	     
	     
	     
	     
	   
	     
	     
	      //全部验证，然后返回给onsubmit做验证
	      function checkall(){
	      if(storename()&&call()&&storeusername()&&address()&&psd()&&info())	{
	      	return true;
	      }else{
	      	return false;
	      }
	      }
	     
		</script>
</head>
<body>
	<jsp:include page="head.jsp"></jsp:include>
	<!--header area end-->

	<!--breadcrumbs area start-->
	<div class="breadcrumbs_area">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div class="breadcrumb_content">
						<h3>商家注册界面</h3>
						<ul>
							<li><a href="index.html">首页</a></li>
							<li>注册界面</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--breadcrumbs area end-->

	<!-- customer login start -->
	<div class="customer_login">
		<div class="container">
			<div class="row">

				<!--register area start-->
				<div class="col-lg-6 col-md-6">
					<div class="account_form register">
						<h2>注册</h2>
						<table border="0" width="1100px">
							<form action="StoreServlet" method="post" onsubmit="return checkall()">
								<tr>
									<td>
										<p>
											<label>店名 <span>*</span></label> <input type="text"
												name="store" id="num1" required="required"
												placeholder="请输入店名" onblur=" storename()">
												<span id="msg"></span>
												
										</p>
									</td>
									<td>
										<p>
											<label>商家电话 <span>*</span></label> <input type="text"
												name="storecall" id="num2" required="required"
												placeholder="请输入商家电话" onblur="call()">
										</p>
									</td>
								</tr>
								<tr><td><span id="span1"></span></td> <td><span id="span2"></span></td></tr>
								<tr>
									<td>
										<p>
											<label>商家账户名 <span>*</span></label> <input type="text"
												name="storename" id="num3" required="required"
												placeholder="请输入账户名" onblur="storeusername()">
										</p>
									</td>
									<td>
										<p>
											<label>商家地址 <span>*</span></label> <input type="text"
												name="address" id="num4" required="required"
												placeholder="请输入地址" onblur="address()">
										</p>
									</td>
								</tr>
								<tr><td><span id="span3"></span></td> <td><span id="span4"></span></td></tr>
								<tr>
									<td>
										<p>
											<label>商家密码 <span>*</span></label> <input type="password"
												name="storepwd" id="num5" required="required"
												placeholder="请输入密码" onblur="psd()">
										</p>
									</td>
									<td>
										<p>
											<label>商家信息 <span>*</span></label> <input type="text"
												name="storeinfo" id="num6" required="required"
												placeholder="请输入商家介绍" onblur="info()">
										</p>
									</td>
								</tr>
								<tr><td><span id="span5"></span></td> <td><span id="span6"></span></td></tr>
								<tr>
									<td colspan="2">
										<div class="login_submit">
											<input type="hidden" name="op" value="add" />
											<button type="submit" value="注册">注册</button>
										</div>
									</td>
								</tr>
							</form>
						</table>
					</div>
				</div>
				<!--register area end-->
			</div>
		</div>
	</div>
	<!-- customer login end -->

	<!--footer area start-->
	<jsp:include page="footer.jsp"></jsp:include>
	<script src="js/jquery-2.0.3.js"></script>
	<script>
		var msg = "";
		$(function() {
			//文本框事件 ： 失去焦点
			$("#num1").blur(function() {
				ajaxName();
			});
		});
		function ajaxName() {
			$.ajax({
				//key:value
				url : "StoreServlet",
				type : "get",
				data : {
					store : $("#num1").val(),
					op : "ajaxstore"
				},
				success : function(data) {
					console.log("data->msg: " + data);
					msg = data;
					//$("#msg")得到页面上id为msg的哪个span
					$("#msg").html(data);
				},
				dataType : "json"
			});
		}
		function check() {
			var store = document.getElementById("num1").value;
			//以空格开头并且已空格结尾，中间多次或者零次空格
			var reg = /^[\s]*$/;
			var flag = reg.test(store);
			//若结果为true则表示全为空格或者为空
			if (flag) {
				alert("店名不能为空！");
				return false;
			}
			//点击增加按钮的时候，都要判断是否有重复的内容(类型重复)
			//重复校验和判断
			if (msg == "商店名称不存在,可以使用.") {
				return true;
			} else {
				return false;
			}
		}
	</script>
</body>
</html>